<template>
  <header class="header-navigation slideDown" id="header">
    <nav>
      <div class="logo">
        <img style="width: 35px;height: 35px; vertical-align: middle; margin-top: -6px;"
          src="@/assets/img/logo.png" />
        <router-link to="/">
          <a href="javascript:void(0);">弹幕工具</a>
        </router-link>
      </div>

      <ul id="starlist" style="display: block">
        <li v-for="webNavbar in webNavbarList" :key="webNavbar.id" @click="clickWebNavbar(webNavbar)">
          <router-link :to="webNavbar.url" >
            <span @click="openHead"
              :style="{ color: ( saveTitle == webNavbar.name) ? '#007fff' : webNavbar.color }"
              :class="[(saveTitle == webNavbar.url || saveTitle == webNavbar.name) ? 'title' : '']">{{
                webNavbar.name
              }}</span>
          </router-link>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      // 标签页
      webNavbarList: [
        {
          "id": 1,
          "name": "首页",
          "url": "/index",
        },
        {
          "id": 2,
          "name": "盲盒礼物统计",
          "url": "/giftCount",
        },
        {
          "id": 3,
          "name": "礼物排行榜",
          "url": "/giftRanking",
        },
        {
          "id": 4,
          "name": "弹幕助手",
          "url": "/danmuHelper",
        },
        {
          "id": 5,
          "name": "大声密谋",
          "url": "/loud",
        }
      ],
      saveTitle: "首页",
      isLogin: false,
      userInfo: {
        photoUrl: "https://i1.hdslb.com/bfs/face/834ae8129c9298cc0e955a854395667f416e33d7.jpg",
        userName: "测试"
      },
    }
  },
  methods: {
    // 点击标签页方法
    clickWebNavbar(webNavbar) {
      this.saveTitle = webNavbar.name;
    },
    openHead() {

    },
    login() {
      // 这里可以触发父组件的登录方法
      this.$emit('login');
    },
    updateTitle() {
      // 根据当前路由更新标题
      const currentRoute = this.$route.path;
      const currentNav = this.webNavbarList.find(nav => nav.url === currentRoute);
      if (currentNav) {
        this.saveTitle = currentNav.name;
      } else {
        // 默认标题
        this.saveTitle = "首页";
      }
    }
  },
  watch: {
    // 监听路由变化
    '$route'(to, from) {
      this.updateTitle();
    }
  },
  mounted() {
    // 组件挂载时更新标题
    this.updateTitle();
  }
}
</script>

<style scoped>

</style>